<template>
    <!-- 导航栏 -->
    <view class="top_block"
        :style="{'padding-top':StatusBar*2+20+'rpx','height': StatusBar*2+60+'rpx','background-color':backColor,}">
        <view class="navbar_wrap">
            <view class="navbar">
                <view class="left" @tap="navTo('back')">
                    <image src="@/static/icon/p_036.png" mode="heightFix" class="arrow-right">
                    </image>
                </view>
                <view class="title">
                    {{title}}
                </view>
                <view class="right"></view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                backColor: '#427af5',


            }
        },
        props: {
            title: {
                type: String,
                default: ""
            },


        },

        methods: {
            navTo(value) {
                if (!value) {
                    return
                }
                if (value == 'back') {
                    uni.navigateBack()
                    return
                }
                uni.navigateTo({
                    url: value
                });
            },
        }
    };
</script>

<style lang="scss">
    .navbar_wrap {
        width: 100%;
        color: #FFFFFF;
        background-color: #5079ed;

        .navbar {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;

            /* height: 88rpx; */


            .title {
                flex: 1;
                text-align: center;
                font-size: 38rpx;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #FFFFFF;
            }

            .right {
                flex-shrink: 0;
                position: absolute;
                right: 30rpx;

                image {
                    width: 34rpx;
                    height: 40rpx;
                }
            }

            .left {
                position: absolute;

                .arrow-right {
                    transform: rotate(180deg);
                    height: 36rpx;
                    top: 5rpx;
                    font-size: 30rpx;
                    padding-right: 20rpx;
                }
            }
        }
    }
</style>